import style from '@/pages/CarList/components/Particulars/index.module.scss'
// 引入图片
import goBackWhiteImg from '@/assets/images/goBackWhite.jpg'
import shareImg from '@/assets/images/share.png'
import topCollectImg from '@/assets/images/topCollect.png'
import moreImg from '@/assets/images/more.png'
import collectHeartImg from '@/assets/images/collectHeart.png'
import informationImg from '@/assets/images/information.png'
import fixedPriceImg from '@/assets/images/fixedPrice.png'
import advertisingImg from '@/assets/images/advertising.png'
import { carDataType } from '@/types/data'
//定义接收参数类型
type props = {
  left: string
  changeGoParticulars: (bool: boolean) => void
  pitchOn?: carDataType
}
const Particulars = ({ left, changeGoParticulars, pitchOn }: props) => {
  const { img_src, car_price, nal_price, down_payments, tit_con, buy_time, mon_price, veh_age } = pitchOn || {}

  return (
    <div className={style.root} style={{ left }}>
      <div className='header'>
        {/* 返回键 */}
        <img
          src={goBackWhiteImg}
          alt=''
          onClick={(e) => {
            changeGoParticulars(false)
          }}
        />
        <img src={shareImg} alt='' />
        <img src={topCollectImg} alt='' />
        <img src={moreImg} alt='' />
      </div>
      <div className='sub'>
        <div className='swiper'>
          <img src={`http://www.ibugthree.com/${img_src}`} alt='123' />
        </div>
        <div className='particularsSub'>
          {/* 价格 */}
          <div className='priceBox'>
            <div className='priceSub'>
              <div className='price'>{car_price}</div>
              <div className='w'>万</div>
              <img src={fixedPriceImg} alt='' className='fixedPrice' />
              <div className='priceBeforeTax'>
                新车含税价:{nal_price}万<div></div>
              </div>
            </div>
            <div className='downPayment'>
              首付{down_payments}万，月供{mon_price}元
              <img src={advertisingImg} alt='' />
            </div>
          </div>
          {/* 参数 */}
          <div className='parameter'>
            <div className='parameterSub'>{tit_con}</div>
            <div className='parameterAuxiliary'>
              <div className='parameterAuxiliarySub1'>
                <div>{buy_time}</div>
                <div>首次上牌</div>
              </div>
              <div className='mainString'></div>
              <div className='parameterAuxiliarySub1'>
                <div>{veh_age}万公里</div>
                <div>首次上牌</div>
              </div>
              <div className='mainString'></div>
              <div className='parameterAuxiliarySub1'>
                <div>合肥</div>
                <div>车辆所在地</div>
              </div>
            </div>
          </div>
          {/* 广告 */}
          <div className='advertising'>
            <img src={advertisingImg} alt='' />
          </div>
          {/* 交易方面 */}
          <div className='deal'>
            <div className='dealItem'>
              <div className='left'>发货</div>
              <div className='right'>
                <div>运往{'   '}北京</div>
                <div></div>
                <div>物流费1650元</div>
              </div>
            </div>
            <div className='dealItem'>
              <div className='left'></div>
              <div className='right2'>今日下单，预计5月02日可提车</div>
            </div>
            <div className='dealItem2'>
              <div className='left'>过户</div>
              <div className='right'>
                <div>过户上牌费360元</div>
              </div>
            </div>
            <div className='dealItem2'>
              <div className='left'>保障</div>
              <div className='right'>
                <div>7天无理由推车，重大问题终身退，1年保修</div>
              </div>
            </div>
            <div className='dealItem2'>
              <div className='left'>延保</div>
              <div className='right'>
                <div>15大系统延保服务（可选服务）</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='footer'>
        <div className='leftBox'>
          <img src={collectHeartImg} alt='' />
          <div>收藏</div>
        </div>
        <div className='leftBox'>
          <img src={informationImg} alt='' />
          <div>客服</div>
        </div>
        <div className='buyCarConsultBtn'>买车咨询</div>
        <div className='buyCarBtn'>买车咨询</div>
      </div>
    </div>
  )
}
export default Particulars
